<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            margin: 0 auto;
        }
        input{
            width: 100%;
            height: 40px;
        }
        textarea{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    class Child extends React.Component{

        constructor(props){
            super(props)
            this.state = {
                name:"",
                content:"",
            }
        }
        
        render(){
            let {name,content} = this.state;
            return (
                <div className='box'>
                    <h2>评论人：</h2>
                    <div>
                        <input type="text" value={name} onChange={(e)=>{
                            this.setState({
                                name:e.target.value
                            })
                        }}/>    
                    </div>
                    <h2>评论内容：</h2>
                    <div>
                    <textarea cols="30" rows="10" value={content}  onChange={(e)=>{
                            this.setState({
                                content:e.target.value
                            })
                        }}></textarea>    
                    </div>
                    <div>
                        <button onClick={()=>{
                            this.props.getMsg(name,content)
                            this.setState({
                                name:"",
                                content:""
                            })
                        }}> 发表</button>    
                    </div>
                </div>
            )
        }
    }
    class App extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                list:[
                    {
                        name:"小明",
                        content:"学习使我快乐！！"
                    },{
                        name:"小红",
                        content:"好好学习天天向上"
                    }
                ]
            }
        }
        render(){
            let {list} = this.state;
          
            return (
                <div className='box'>
                    <Child getMsg={(name,content)=>{
                        let obj = {
                            name,
                            content
                        }
                        list.push(obj)
                        this.setState({
                            list
                        })
                    }}/>
                    <h2>留言板：</h2> 
                    {
                      list.map((item,index)=>{
                            return (
                                <div key={index}>
                                    <div>作者：{item.name}</div>    
                                    <div>内容：{item.content} <button onClick={()=>{
                                        list.splice(index,1)
                                        this.setState({
                                            list
                                        })
                                    }}>删除</button></div>
                                </div>
                            )
                      })
                    }   
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>